<template>
    <mrc_ess_MyDialog ref="dialogRef" title="title_table_settings" height="500" confirmText="btn_submit"
        :autoClose="false" @confirm="handleConfirm">
        <div class="my-edit-form pa-6" :class="'table-settings-' + props.tableName">
            <mrc_ess_RadioGroup inline label="label_line_height" v-model="tableType" :items="tableTypeList">
            </mrc_ess_RadioGroup>
            <div class="pl-2 pr-2">
                <div class="text-text--primary text-[14px] leading-[14px] font-[500] mb-4">{{ $t('title_settings') }}
                </div>
                <!-- 可排序 -->
                <draggable :list="tableFields" itemKey="key" ghost-class="ghost" chosen-class="chosenClass"
                    animation="300">
                    <template #item="{ element }">
                        <div class="fields-item flex align-center rounded-[4px]" v-if="element.settingsSortable == true">
                            <div class="py-1 px-2 pr-1 cursor-move sort-btn">
                                <svg-icon iconClass="sort-btn" size="16"></svg-icon>
                            </div>
                            <div class="fields-item-checkbox">
                                <v-checkbox label="" color="primary" v-model="element.show" :disabled="!element.editShow">
                                    <template v-slot:label>
                                        <div class="text-text--primary text-[14px] leading-[14px] font-[500]">
                                            {{ element.key == 'opt' ? $t('label_operate') : $t(element.i18n ||
                                            element.title) }}
                                        </div>
                                    </template>
                                </v-checkbox>
                            </div>
                        </div>
                    </template>
                </draggable>
                <!-- 不可排序 -->
                <div class="fields-list">
                    <div class="fields-item flex align-center rounded-[4px] bg-header-bg"
                        v-for="(fields, index) in tableFields" :key="fields.key" v-show="fields.settingsSortable == false">
                        <div class="py-1 px-2 pr-1 sort-btn">
                            <svg-icon iconClass="sort-btn" size="16"></svg-icon>
                        </div>
                        <div class="fields-item-checkbox">
                            <v-checkbox label="" color="primary" v-model="fields.show" :disabled="!fields.editShow">
                                <template v-slot:label>
                                    <div class="text-text--primary text-[14px] leading-[14px] font-[500]">
                                        {{ fields.key == 'opt' ? $t('label_operate') : $t(fields.i18n || fields.title)
                                        }}
                                    </div>
                                </template>
                            </v-checkbox>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </mrc_ess_MyDialog>
</template>

<script lang="ts" setup>
import draggable from "vuedraggable";

import { ref, onMounted, toRaw, nextTick, onUnmounted } from 'vue';

const emit = defineEmits(['confirm']);

const props = defineProps({
    tableName: {
        type: String,
        default: ''
    }
})

const dialogRef = ref<any>(null);

const tableFields = ref<any>([]);

const tableType = ref(1);
const tableTypeList = [{
    title: 'label_normal',
    value: 1
}, {
    title: 'label_tight',
    value: 2
}]

function handleConfirm(e) {
    emit("confirm", JSON.parse(JSON.stringify({
        tableType: toRaw(tableType.value),
        tableFields: toRaw(tableFields.value)
    })))
    e.close();
}

/**
* 关闭对话框
*/
function close() {
    dialogRef.value.close();
}
/**
 * 显示对话框
 */
function open(data: any) {
    dialogRef.value.open();
    let _data = JSON.parse(JSON.stringify(toRaw(data)));
    tableType.value = _data.tableType;
    tableFields.value = _data.tableFields;
}
defineExpose({
    close,
    open,
})
</script>

<style scoped>
.fields-item-checkbox :deep(.v-input__details) {
    display: none;
}

.fields-item-checkbox :deep(.v-checkbox .v-selection-control) {
    min-height: auto;
}

.fields-item-checkbox :deep(.v-label) {
    opacity: 1;
}
</style>